import React, {Component} from 'react';
import {connect} from 'react-redux';
import {fetchNewsLists} from '../actions/newsAction';
import {fetchProductionLists} from '../actions/productionAction';
import NavLink from './NavLink';
class Home extends Component {
  componentWillMount() {
    this
      .props
      .fetchNewsLists(),
      this
          .props
          .fetchProductionLists()
  }
  render() {
    //获取新闻的列表
    const {newsLists,productionLists} = this.props;
    if (newsLists.rows) {

      var newsArr = [];
      var len = newsLists.rows.length;
      for (let i = 0; i < (len > 3
        ? 3
        : len); i++) {

        newsArr.push(
          <div className="col-lg-4" key={newsLists.rows[i]._id}>
            <img
              className="img-circle"
              src={`http://localhost:3000/${newsLists.rows[i].imgObject.filename}`}
              alt="Generic placeholder image"
              width="140"
              height="140"/>
           <NavLink to={{pathname:"/news/"+newsLists.rows[i]._id,state:{data:newsLists.rows[i].typeId} }}>
              <h2>{newsLists.rows[i].title}</h2>
            </NavLink>
            <NavLink to={{pathname:"/news/"+newsLists.rows[i]._id,state:{data:newsLists.rows[i].typeId} }}>
              <div
                className='text_slice'
                dangerouslySetInnerHTML={{
                __html: newsLists.rows[i].content
              }}></div>
            </NavLink>
          </div>
        )
      }
    }
    //获取产品
    if (productionLists.rows) {
      
            var productionArr = [];
            var len = productionLists.rows.length;
            for (let i = 0; i < (len > 6
              ? 6
              : len); i++) {
      
                productionArr.push(
                <div className="col-lg-4" key={productionLists.rows[i]._id}>
                  <img
                    className="img-circle"
                    src={`http://localhost:3000/${productionLists.rows[i].img.filename}`}
                    alt="Generic placeholder image"
                    width="140"
                    height="140"/>
                  <div  className='production_slice'>
                         <div style={{color:'red',fontSize:'16px',fontFamily: 'Verdana',marginTop:'20px'}}><i>￥</i><em style={{fontSize:'20px'}}>{productionLists.rows[i].price}</em></div>
                        <NavLink to={{pathname:"/production/"+productionLists.rows[i]._id,state:{data:productionLists.rows[i].typeId} }}>                                                
                          <div
                            dangerouslySetInnerHTML={{
                            __html: productionLists.rows[i].name
                          }}>                          
                          </div>    
                                           
                        </NavLink>   
                        <p>卖家:{productionLists.rows[i].seller}</p>   
                        <button type="button" className="btn btn-danger">加入购物车</button>                  
                        </div>
                </div>
              )
            }
          }
    return (
      <div>
        <div
          id="carousel-example-generic"
          className="carousel slide"
          data-ride="carousel">
          <ol className="carousel-indicators">
            <li
              data-target="#carousel-example-generic"
              data-slide-to="0"
              className="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>
          <div className="carousel-inner" role="listbox">
            <div className="item active">
              <img src="./modules/img/100.jpg" alt=""/>
            </div>
            <div className="item">
              <img src="./modules/img/101.jpg" alt=""/>
            </div>
            <div className="item">
              <img src="./modules/img/102.jpg" alt=""/>
            </div>
            <div className="item">
              <img src="./modules/img/103.jpg" alt=""/>
            </div>
          </div>
          <a
            className="left carousel-control"
            href="#carousel-example-generic"
            role="button"
            data-slide="prev">
            <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span className="sr-only">Previous</span>
          </a>
          <a
            className="right carousel-control"
            href="#carousel-example-generic"
            role="button"
            data-slide="next">
            <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span className="sr-only">Next</span>
          </a>
        </div>
        <div className="container marketing">

          <h2>最新新闻</h2>
          <div className="row">
            {newsArr}
          </div>

        </div>
        <hr className="featurette-divider"/>
        <div className="container marketing">

          <h2>最新商品</h2>
          <div className="row">
            {productionArr}
          </div>

        </div>

        <hr className="featurette-divider"/> 

        <footer>
        <p className="pull-right"><a href="#">回到首页</a></p>
        <p>© 2017 Company, Inc. · <a href="#">Fantasy</a> · <a href="#">范哲文</a></p>

    </footer>
      </div>

    )
  }
}
const getValue = (state) => {
  return {newsLists: state.newsReducer.newsLists,
    productionLists: state.productionReducer.productionLists,
  }
}
const homeContext = connect(getValue, {fetchNewsLists,fetchProductionLists})(Home)
module.exports = homeContext;